/**
 * This code is part of the Bumpslide Library by David Knape
 * http://bumpslide.com/
 * 
 * Copyright (c) 2006, 2007, 2008 by Bumpslide, Inc.
 * 
 * Released under the open-source MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * see LICENSE.txt for full license terms
 */
 package 
{
	import com.bumpslide.data.LoopedDataProvider;
	import com.bumpslide.data.type.Padding;
	import com.bumpslide.events.UIEvent;
	import com.bumpslide.ui.Applet;
	import com.bumpslide.ui.GenericButton;
	import com.bumpslide.ui.Grid;
	import com.bumpslide.ui.Image;
	import com.bumpslide.ui.Lightbox;
	import com.bumpslide.ui.ThumbnailItem;
	import com.bumpslide.ui.constants.Direction;
	import com.bumpslide.util.Align;

	/**
	 * Test of the scrolling grid component
	 *
	 * @mxmlc -sp+=../../classes -sp+=../gridlayout  
	 * 
	 * @author David Knape
	 */
	[SWF(width="900",height="500",backgroundColor="#253C4B",frameRate="60")]
	public class Demo_05_Grid extends Applet {

		private var grid:Grid;
		private var lightbox:Lightbox;
		private var popup:Image;
		private var directionToggle:GenericButton;

		override protected function addChildren():void {

			// create horizontal grid of thumbnail images 
			grid = new Grid(ThumbnailItem, 200, 120, Direction.HORIZONTAL);
			grid.spacing = 10;
			grid.gap = 10;
			grid.padding = new Padding(10);
			grid.tweenEnabled = true;
			grid.dataProvider = new LoopedDataProvider(SampleData.IMAGES, 100);
			addChild(grid);
			
			// create lightbox to hold full size image
			lightbox = new Lightbox();
			popup = new Image();
			popup.fadeOnLoad = true;
			popup.scaleMode = Image.SCALE_RESIZE;
			popup.setSize( 500, 500 );
			addChild(lightbox);
			
			// create button to toggle direction
			directionToggle = new GenericButton( 100, 20, 10, 10, 'Change Direction', function():void {
				if(grid.orientation==Direction.VERTICAL) {
					grid.orientation = Direction.HORIZONTAL;
				} else {
					grid.orientation = Direction.VERTICAL;
				}
			} );
			addChild(directionToggle);
			
			// add event listeners
			grid.addEventListener(Grid.EVENT_ITEM_CLICK, handleGridItemClick);
			popup.addEventListener(Image.EVENT_LOADED, onImageLoaded);
			
		}
		
		// show popup message with data from clicked item
		private function handleGridItemClick(event:UIEvent):void {
			popup.load( event.data as String );
			lightbox.open( popup );
		}
		
		
		
		private function onImageLoaded(event:UIEvent):void {
			Align.center( popup );
			Align.middle( popup );
		}

		// on stage resize, size the grid
		override protected function draw():void {	
			grid.y = 40;
			grid.fixedColumnCount = Math.round( width / 200);
			grid.setSize(width, height-40);
		}
	}
}